---
title: "Utility Props"
description: "Explore the variety of utility props provided by Kuma UI"
---

# Utility Props

Kuma UI includes a broad range of utility props that offer style customization for your components. These are derived from CSS properties and enable a more efficient and organized way to style components.

## Space

```tsx copy
<Box m="auto" p={2} />
```

### Available Props

`m`, `mt`, `mb`, `ml`, `mr`, `mx`, `my`, `p`, `pt`, `pb`, `pl`, `pr`, `px`, `py`

## Font

```tsx copy
<Text lineHeight={2} letterSpacing="1.5rem" />
```

### Available Props

`hyphenateCharacter, hyphenateLimitChars, hyphens, hangingPunctuation, lineHeight, lineBreak, letterSpacing, orphans, quotes, rubyPosition, unicodeBidi, widows, whiteSpace, wordBreak, wordSpacing, writingMode`

## Text

```tsx copy
<Text textAlign="center" />
```

### Available Props

`textAlign, textAlignLast, textCombineUpright, textDecoration, textDecorationColor, textDecorationLine, textDecorationSkipInk, textDecorationStyle, textDecorationThickness, textEmphasis, textEmphasisColor, textEmphasisPosition, textEmphasisStyle, textIndent, textJustify, textOrientation, textOverflow, textRendering, textShadow, textTransform, textUnderlineOffset, textUnderlinePosition`

## Layout

```tsx copy
<Box width="200px" zIndex={1} />
```

### Available Props

`width, minWidth, maxWidth, height, minHeight, maxHeight, display, overflow, position, zIndex, cursor`

## Flex

```tsx copy
<Flex flexDir="row" />
```

### Available Props

`flexDir, justify, alignItems, alignContent, alignSelf, flex, flexFlow, flexWrap, flexGrow, flexShrink, flexBasis, justifyItems, justifySelf, gap`

## Color

```tsx copy
<Button bg="blue" color="white" />
```

### Available Props

`bg, bgColor, color, borderColor, outlineColor, accentColor, caretColor, opacity`

## Border

```tsx copy
<Box borderRadius="4px" />
```

### Available Props

`border, borderWidth, borderStyle, borderRadius, borderTop, borderRight, borderBottom, borderLeft`

## Outline

### Available Props

`outline, outlineWidth, outlineStyle, outlineOffset`

## Position

### Available Props

`top, right, bottom, left, inset`

## Shadow

### Available Props

`textShadow, boxShadow`

## List

### Available Props

`listStyle, listStyleImage, listStylePosition, listStyleType`

## Grid

### Available Props

`grid, gridArea, gridAutoColumns, gridAutoFlow, gridAutoRows, gridColumn, gridColumnEnd, gridColumnStart, gridRow, gridRowEnd, gridRowStart, gridTemplate, gridTemplateAreas, gridTemplateColumns, gridTemplateRows, gridGap, gridColumnGap, gridRowGap`

## Column

### Available Props

`columnCount, columnFill, columnGap, columnRule, columnRuleColor, columnRuleStyle, columnRuleWidth, columnSpan, columnWidth, columns`

## Effect

### Available Props

`transition, transitionDuration, transitionProperty, transitionTimingFunction, transitionDelay, transform, transformBox, transformOrigin, transformStyle`

## Mask

### Available Props

`mask, maskBorder, maskBorderMode, maskBorderOutset, maskBorderRepeat, maskBorderSlice, maskBorderSource, maskBorderWidth, maskClip, maskComposite, maskImage, maskMode, maskOrigin, maskPosition, maskRepeat, maskSize, maskType`
